<template>
    <div class="wh-100% overflow-scroll">
        <div v-if="model === 'cancel'" class="py-10px flex-center">
            取消情况
        </div>
        <n-list v-if="model === 'cancel' && cancellation" hoverable bordered>
            <n-list-item>
                <n-thing title="取消单号" :title-extra="cancellation.id" />
            </n-list-item>
            <n-list-item>
                <n-thing
                    title="提交申请时间"
                    :title-extra="
                        new Date(cancellation.createdTime).toLocaleString()
                    "
                />
            </n-list-item>
            <n-list-item>
                <n-thing title="申请取消理由">
                    {{ cancellation.cancellationReason }}
                </n-thing>
            </n-list-item>
            <n-list-item>
                <n-thing
                    title="退款倍率"
                    :title-extra="
                        refundPercentageLabel[cancellation.refundPercentage]
                    "
                />
            </n-list-item>
            <n-list-item>
                <n-thing title="退款金额">
                    <template #header-extra>
                        <n-tag type="primary" size="small">
                            {{ cancellation.refundAmount }} ￥
                        </n-tag>
                    </template>
                </n-thing>
            </n-list-item>
        </n-list>
        <div class="py-10px flex-center">预约信息</div>
        <n-list hoverable bordered>
            <n-list-item>
                <n-thing title="预约单号" :title-extra="reservation.id" />
            </n-list-item>
            <n-list-item>
                <n-thing
                    title="创建时间"
                    :title-extra="
                        new Date(reservation.createdTime).toLocaleString()
                    "
                />
            </n-list-item>
            <n-list-item>
                <n-thing
                    title="预约日期"
                    :title-extra="new Date(detail.order.requirement.reserveDate!).toLocaleDateString()"
                />
            </n-list-item>
            <n-list-item>
                <n-thing
                    title="预约时间段"
                    :title-extra="`${detail.order.requirement.startTime}:00-${detail.order.requirement.endTime}:00`"
                />
            </n-list-item>
            <n-list-item>
                <n-thing
                    title="预约会议室"
                    :title-extra="detail.meetingRoom.name"
                />
            </n-list-item>
        </n-list>
        <div class="py-10px flex-center">客户信息</div>
        <n-list hoverable bordered>
            <n-list-item>
                <n-thing
                    title="预约客户"
                    :title-extra="detail.customer.username"
                />
            </n-list-item>
            <n-list-item>
                <n-thing
                    title="联系电话"
                    :title-extra="detail.customer.phone"
                />
            </n-list-item>
            <n-list-item>
                <n-thing
                    title="客户公司"
                    :title-extra="detail.customer.companyName"
                />
            </n-list-item>
        </n-list>
        <template v-if="model === 'reserve'">
            <div class="py-10px flex-center">订单信息</div>
            <n-list hoverable bordered>
                <n-list-item>
                    <n-thing title="订单号" :title-extra="detail.order.id" />
                </n-list-item>
                <n-list-item>
                    <n-thing title="订单金额">
                        <template #header-extra>
                            <n-tag type="primary">
                                {{ detail.order.amount }} ￥
                            </n-tag>
                        </template>
                    </n-thing>
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="创建时间"
                        :title-extra="
                            new Date(detail.order.createdTime).toLocaleString()
                        "
                    />
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="付款时间"
                        :title-extra="new Date(detail.order.paymentTime!).toLocaleString()"
                    />
                </n-list-item>
            </n-list>
        </template>
    </div>
</template>

<script lang="ts" setup>
import type { Customer } from "@/service/api/types/user";
import type { MeetingRoom } from "@/service/api/types/room";
import type {
    Reservation,
    Cancellation,
    Order,
} from "@/service/api/types/reservation";

interface ReservationDetail {
    order: Order;
    customer: Customer;
    meetingRoom: MeetingRoom;
}

defineProps<{
    model: "reserve" | "cancel";
    reservation: Reservation;
    detail: ReservationDetail;
    cancellation?: Cancellation;
}>();

const refundPercentageLabel: { [key: number]: string } = {
    1: "100%",
    0.75: "75%",
    0.25: "25%",
};
</script>

<style scoped></style>
